<template>
  <div id="MsgBoard">
    <!-- 留言编辑区域 -->
    <div class="msg-edit">
      <h1>{{ msgTitle }}</h1>
      <el-input
        class="msg-input edit-msg"
        type="textarea"
        placeholder="文明交流，友善发言 ( *^_^* )"
        maxlength="100"
        resize="none"
        show-word-limit
        v-model="msg"
      >
      </el-input>
      <div class="userinfo-input">
        <i class="iconfont icon-biaoqing" @click.stop="showExpressionHandler"></i>
        <el-form 
          :model="visitorForm" 
          :rules="rules" 
          ref="visitorForm"
        >
          <el-form-item prop="visitor">
            <el-input
              class="username-input"
              placeholder="* 称呼"
              v-model="visitorForm.visitor"
              :disabled="checkLogin"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item prop="email">
            <el-input
              class="useremail-input"
              placeholder="* 邮箱"
              v-model="visitorForm.email"
              :disabled="checkLogin"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item prop="siteaddress">
            <el-input
              class="usersite-input"
              placeholder="博客 http://www.example.com"
              v-model="visitorForm.siteaddress"
              clearable>
            </el-input>
          </el-form-item>
        </el-form>
        <div v-show="isShowExpression" class="expression" @click.stop="">
          <ul>
            <li v-for="(item, index) in emoji" 
                :key="index"
                @click.stop="handleEmojiClick(item, 'edit-msg')"
            >
              {{ item }}
            </li>
          </ul>
        </div>
      </div>
      <el-button
        class="submit-btn" 
        type="primary"
        @click="submitHandler"
      >
        {{ submitText }}
      </el-button>
    </div>

    <!-- 显示留言区 -->
    <div class="msg-show">
      <ul>
        <li v-for="(item, index) in showList" :key="index">
          <!-- 主留言 -->
          <div class="msg-main">
            <!-- 左侧用户头像 -->
            <div class="msg-left">
              <img :src="baseURL+getAvatar(item)" alt="">
            </div>
            <!-- 右侧用户信息 -->
            <div class="msg-right">              
              <div class="user-info">
                <!-- 昵称 -->
                <span 
                  class="user-name" 
                  :title="getVisitorEmail(item)"
                > 
                  {{ getNick(item) }} 
                </span>
                <span class="bloger" v-show="showAdminIcon(item)">博主</span>
                <!-- 不是管理员就显示访客或注册用户的标识 -->
                <span 
                  class="iconfont"
                  :class="{'icon-fangkeshu' : item.isVisitor,  'icon-zhucezhanghu': !item.isVisitor}"
                  :title="getUserTitle(item)"
                  v-show="!showAdminIcon(item)"
                >
                </span>                
                <!-- 留言时间 -->
                <span 
                  class="msg-time"
                > 
                  {{ formatDate(item.date) }} 
                </span>
                <!-- 置顶标志 -->
                <span class="top" v-show="item.isTop">置顶</span>
              </div>
              <!-- 留言 -->
              <div 
                class="user-msg"
                :class="{'msg-shield': item.isShield}"
              >
                {{ showMsg(item, false) }}
              </div>
              <!-- 交互区 -->
              <div class="msg-interactive">
                <!-- 点赞 -->
                <i 
                  class="iconfont icon-dianzan"
                  :class="{islike: isLike(item)}"
                  @click="likeHandler(item._id)"
                >
                  <span>赞</span>
                  <span v-show="item.likes.length > 0">{{ item.likes.length }}</span>
                </i>
                <!-- 回复(为兼容子留言回复的函数，这里的第二个参数同样传item) -->
                <i 
                  class="iconfont icon-huifu"
                  @click="replyHandler(item, item, false)"                  
                >
                  <span v-show="!item.isShowReply">回复</span>
                  <span v-show="item.isShowReply">收起</span>
                </i>
                
                <!-- 反馈按钮 -->
                <el-popover
                  :placement="popoverDirection"
                  :width="160"
                  trigger="hover"
                >
                  <template #reference>
                    <i class="iconfont icon-shenglvehao"></i>
                  </template>
                  <div>
                    <p style="margin-bottom:4px;color:#ff6037;font-size:12px;vertical-align:center;">
                      <span class="iconfont icon-tousu" style="vertical-align:-1px"></span> 反馈
                    </p>
                    <el-button @click="reportMsg(1, item._id)" type="warning" size="mini" style="margin-bottom: 8px">违法违规</el-button>
                    <el-button @click="reportMsg(2, item._id)" type="warning" size="mini">不友善</el-button><br/>
                    <el-button @click="reportMsg(3, item._id)" type="warning" size="mini">灌水</el-button>
                    <el-button @click="reportMsg(4, item._id)" type="warning" size="mini">广告</el-button>
                  </div>                  
                </el-popover>
                
              </div>
            </div>
          </div>

          <!-- 主回复框 -->
          <div 
            class="reply-input"
            v-show="item.isShowReply"
          >
            <el-input
              class="msg-input reply-main-msg"
              type="textarea"
              :placeholder="'回复 '+getNick(item)"
              maxlength="100"
              resize="none"
              show-word-limit
              v-model="item.replyMsg"
            >
            </el-input>
            <div>
              <i class="iconfont icon-biaoqing" @click.stop="showMsgExpressionHandler"></i>
              <el-button size="mini" plain @click="submitReplyHandelr(item, item._id, false)">回复</el-button>
            </div>
            <div v-show="isShowMsgExpression" class="expression" @click.stop="">
              <ul>
                <li v-for="(item, index) in emoji" 
                    :key="index"
                    @click.stop="handleEmojiClick(item, 'reply-main-msg')"
                >
                  {{ item }}
                </li>
              </ul>
            </div>
          </div>

          <!-- 子留言 -->
          <div class="msg-reply" v-for="(replyItem, index) in item.children" :key="index">
            <!-- 子留言用户区（用户信息和留言显示） -->
            <div class="reply-user">
              <!-- 左侧用户头像 -->
              <div class="msg-left">
                <img :src="baseURL+getAvatar(replyItem)" alt="">
              </div>
              <!-- 右侧用户信息 -->
              <div class="msg-right">
                <div class="user-info">
                  <!-- 昵称 -->
                  <span class="user-name"> {{ replyItem.users_doc.user }} </span>                  
                  <span class="bloger" v-show="showAdminIcon(replyItem)">博主</span>
                  <!-- 留言时间 -->
                  <span class="msg-time"> {{ formatDate(replyItem.date) }} </span>
                </div>
                <!-- 留言 -->
                <div 
                  class="user-msg"
                  :class="{'msg-shield': replyItem.isShield}"
                >
                  <span v-show="!replyItem.isShield">{{ getReplyUser(item, replyItem) }}</span>
                  {{ showMsg(replyItem, true) }}
                </div>
                <!-- 交互区 -->
                <div class="msg-interactive">
                  <!-- 点赞 -->
                  <i 
                    class="iconfont icon-dianzan"
                    :class="{islike: isLike(replyItem)}"
                    @click="likeHandler(item._id, replyItem._id)"
                  >
                    <span>赞</span>
                    <span v-show="replyItem.likes.length > 0">{{ replyItem.likes.length }}</span>
                  </i>
                  <!-- 回复 -->
                  <i 
                    class="iconfont icon-huifu"
                    @click="replyHandler(item, replyItem, true)"
                  >
                    <span v-show="!replyItem.isShowReply">回复</span>
                    <span v-show="replyItem.isShowReply">收起</span>
                  </i>
                  <!-- 反馈 -->
                  <el-popover
                    :placement="popoverDirection"
                    :width="160"
                    trigger="hover"
                  >
                    <template #reference>
                      <i class="iconfont icon-shenglvehao"></i>
                    </template>
                    <div>
                      <p style="margin-bottom:4px;color:#ff6037;font-size:12px;vertical-align:center;">
                        <span class="iconfont icon-tousu" style="vertical-align:-1px"></span> 反馈
                      </p>
                      <el-button @click="reportMsg(1, item._id, replyItem._id)" type="warning" size="mini" style="margin-bottom: 8px">违法违规</el-button>
                      <el-button @click="reportMsg(2, item._id, replyItem._id)" type="warning" size="mini">不友善</el-button><br/>
                      <el-button @click="reportMsg(3, item._id, replyItem._id)" type="warning" size="mini">灌水</el-button>
                      <el-button @click="reportMsg(4, item._id, replyItem._id)" type="warning" size="mini">广告</el-button>
                    </div>                  
                  </el-popover>
                </div>
              </div>
            </div>
            
            <!-- 子回复框 -->
            <div 
              class="reply-input"
              v-show="replyItem.isShowReply"
            >
              <el-input
                class="msg-input reply-child-msg"
                type="textarea"
                :placeholder="'回复 '+replyItem.replyUser2.user"
                maxlength="100"
                resize="none"
                show-word-limit
                v-model="replyItem.replyMsg"
              >
              </el-input>
              <div>
                <i class="iconfont icon-biaoqing" @click.stop="showMsgExpressionHandler"></i>              
                <el-button size="mini" plain @click="submitReplyHandelr(replyItem, item._id, true)">回复</el-button>
              </div>
              <div v-show="isShowMsgExpression" class="expression" @click.stop="">
                <ul>
                  <li v-for="(item, index) in emoji" 
                      :key="index"
                      @click.stop="handleEmojiClick(item, 'reply-child-msg')"
                  >
                    {{ item }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 分割线 -->
          <el-divider v-if="index!=showList.length-1"></el-divider>
        </li>
      </ul>
      <!-- 加载留言 -->
      <div class="load_msg" @click="loadMsgHandler">{{ loadMsgTip }}</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'MsgBoard',
  props: {
    section: {
      type:String, 
      required: true
    }
  },
  data(){
    return{
      emoji: [
        "🙂", "😀", "😄", "😁", "😆", "😅", "🤣", "😂", "😊", 
        "😇", "🥰", "😙", "😋", "😝", "😎", "🤔","😵",  "🙁", 
        "😳", "😰", "😭", "😖", "🙏", "👏", "👍", "👋", "👌", 
        "🤞", "🤟", "🤙", "👊", "🖕", "🤝", "🚶", "🐶", "🐱", 
        "🐷", "❤️", "☕", "✈", "🚅", "🚢", "🏠", "🕛", "🌧", 
        "🌀", "❄", "🌨", "☀", "🌕"        
      ],
      visitorForm:{
        visitor: '',
        email: '',
        siteaddress: '',
      },
      rules:{
        visitor: [{
          validator(rule, value, callback) {
            let reg = /^[^\s]{2,8}$/
            if (reg.test(value)) {
              callback()
            } else {
              callback(new Error("2-8位非空格字符"))
            }
          },
          trigger: 'blur'
        }],        
        email: [{
          validator(rule, value, callback) {
            let reg = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/
            if (reg.test(value)) {
              callback()
            } else {
              callback(new Error("请输入正确的邮箱地址"))
            }
          },
          trigger: 'blur'
        }]
      },
      isShowExpression: false,
      isShowMsgExpression: false,
      isLogin: false,
      popoverDirection: 'right',
      loadMsgTip: '加载中...',
      isReqMsg: false,
      msg:'',//发表留言
      curPage: 0,
      pageSize: 5,  // 每页显示的条目数量
      totalCount: 0, // 留言总数
      showList:[]
    }
  },
  created(){    
    this.getMsg(false)
    this.clientWidth()
  },
  computed:{
    ...mapState(['userInfo']),
    checkLogin(){
      this.isLogin = this.userInfo.user === undefined ? false : true      
      return this.isLogin
    },
    msgTitle(){
      return this.section.includes('article') ? "添加新评论" : "添加新留言"
    },
    submitText(){
      return this.section.includes('article') ? "提交评论" : "提交留言"
    }
  },
  watch:{
    '$store.state.userInfo'(){
      this.$refs.visitorForm.resetFields()
    }
  },
  methods:{
    // 监听屏幕尺寸变化
    clientWidth(){
      this.setPopoverDirection()
      window.onresize = () => {
        this.setPopoverDirection()
      }
    },
    setPopoverDirection(){
      this.popoverDirection = 'right'
      if(document.body.clientWidth < 600){
        this.popoverDirection = 'bottom'
      }
    },
    // 留言编辑表情框开关
    showExpressionHandler(){
      this.isShowMsgExpression = false
      this.isShowExpression = !this.isShowExpression
    },
    // 留言回复标情况开关
    showMsgExpressionHandler(){
      this.isShowExpression = false
      this.isShowMsgExpression = !this.isShowMsgExpression
    },
    // 插入表情
    handleEmojiClick(item, inputName){
      let inputTxt = document.getElementsByClassName(inputName)[0].getElementsByClassName("el-textarea__inner")[0]
      if (document.selection) {
        inputTxt.focus()
        let sel = document.selection.createRange()
        sel.text = str
        sel.select()
      }else if(inputTxt.selectionStart || inputTxt.selectionStart == '0'){ //火狐/网景 浏览器
        //得到光标前的位置
        var startPos = inputTxt.selectionStart
        //得到光标后的位置
        var endPos = inputTxt.selectionEnd
        // 在加入数据之前获得滚动条的高度
        var restoreTop = inputTxt.scrollTop
        inputTxt.value = inputTxt.value.substring(0, startPos) + item + inputTxt.value.substring(endPos, inputTxt.value.length)
        //如果滚动条高度大于0
        if (restoreTop > 0) {// 返回          
          inputTxt.scrollTop = restoreTop
        }
        inputTxt.focus();
        inputTxt.selectionStart = startPos + item.length
        inputTxt.selectionEnd = startPos + item.length
      }else{
        inputTxt.value += item
        inputTxt.focus()
      }
    },
    // 反馈留言
    async reportMsg(type, id, childId){
      let {data} = await this.$axios({
        method: 'post',
        url: '/msg/report',
        data: {
          type,
          id,
          childId
        }
      })

      if(data.code){
        return this.$message.error(data.msg)
      }

      this.$message.success(data.msg)
    },
    // 子留言显示回复昵称处理
    getReplyUser(item, replyItem){
      if(item.isVisitor){
        if(!replyItem.replyUsers_doc._id){
          return ""
        }

        if(replyItem.replyUsers_doc._id !== replyItem.users_doc._id){
          // 如果回复的不是自己（这里的自己不能用this.userInfo._id，因为每个客户端登录后该值在程序中都不一样）
          return "@"+replyItem.replyUsers_doc.user
        }
      }else{
        // console.log("getReplyUser1:", item.users_doc._id);
        // console.log("getReplyUser2:", replyItem.users_doc._id);
        // console.log("getReplyUser3:", replyItem.replyUsers_doc._id);
        if(!replyItem.replyUsers_doc._id){
          return ""
        }
        if(replyItem.replyUsers_doc._id !== item.users_doc._id && replyItem.replyUsers_doc._id !== replyItem.users_doc._id){
          // 如果回复的不是主留言和自己
          return "@"+replyItem.replyUsers_doc.user
        }
        return ""
      }
      return ''
    },
    // 留言和回复屏蔽
    showMsg(item, isChild){
      if(item.isShield){
        if(isChild){
          return '此条回复已被屏蔽'
        }else{
          return '此条留言已被屏蔽'
        }        
      }
      return item.msg.trim()
    },
    // 是否是自己点赞
    isLike(item){
      return this.userInfo._id && item.likes.indexOf(this.userInfo._id) != -1
    },
    // 点赞
    async likeHandler(itemId, childItemId){
      if(!this.userInfo.user){
        return this.$message.error('请登录后点赞')
      }

      let {data} = await this.$axios({
        method: 'post',
        url: '/msg/like',
        data:{
          itemId,
          childItemId
        }
      })

      if(data.code){
        return this.$message.error(data.msg)
      }
      this.getMsg(false)
    },
    // 打开回复框
    replyHandler(item, curItem, isChild){
      if(!this.userInfo.user){
        return this.$message.error('请登录后回复')
      }

      if(this.showList.length > 1 || (this.showList.length === 1 && this.showList[0].children.length >= 1)){
        for(let item_m of this.showList){
          if(!isChild){
            // 如果点击是主留言回复，那么当前主留言的isShowReply保持不变
            if(item_m._id != curItem._id){
              item_m.isShowReply = false
              curItem.replyMsg = ''
            }
          }else{
            // 如果点击的是子留言回复，那么当前主留言的isShowReply统统设置为false
            item_m.isShowReply = false
            curItem.replyMsg = ''
          }
          
          for(let item_c of item_m.children){
            if(item_c._id != curItem._id){
              item_c.isShowReply = false
            }
          }
        }
      }

      if(isChild){
        curItem.isShowReply = !curItem.isShowReply
        curItem.replyUser2 = curItem.users_doc
      }else{
        item.isShowReply = !item.isShowReply
        item.replyUser = curItem.users_doc
      }      
      // console.log(item);
    },
    // 提交回复
    async submitReplyHandelr(item, itemId, isChild){
      let replyUserId
      let replyMsg = item.replyMsg.trim()
      if(!replyMsg){
        return this.$message.error('回复内容不能为空')
      }

      if(isChild){
        replyUserId = item.replyUser2._id
      }else{
        replyUserId = item.replyUser && item.replyUser._id
      }
      
      let {data} = await this.$axios({
        method: 'post',
        url: '/msg/reply',
        data: {
          _id: itemId,//这个得是主留言的id
          msg: replyMsg,
          replyUserId
        }
      })

      if(data.code){
        return this.$message.error(data.msg)
      }

      this.getMsg(false)
    },
    // 提交留言
    async submitHandler(){
      let msg = this.msg.trim()      
      let visitor = this.visitorForm.visitor.trim()
      let email = this.visitorForm.email.trim()
      let siteAdress = this.visitorForm.siteaddress.trim()
      let urlMatch = /^((ht|f)tps?):\/\/([\w\-]+(\.[\w\-]+)*\/)*[\w\-]+(\.[\w\-]+)*\/?(\?([\w\-\.,@?^=%&:\/~\+#]*)+)?/;      
      if(!msg){
        return this.$message.error('请输入留言内容')
      }
      if(!urlMatch.test(siteAdress)){
        siteAdress = ""
        // this.$message.error('网址格式不正确')
      }

      if(this.userInfo.user){
        // 用户已登录
        let{ data } = await this.$axios({
          method: 'post',
          url: '/msg/publish',
          data: {
            msg,
            section:this.section,
            siteAdress
          }
        })

        if(data.code){
          return this.$message.error(data.msg)
        }
        // 留言成功
        this.publishSuccess(data.msg)
      }else{
        // 用户未登录
        this.$refs.visitorForm.validate(async valid => {
          if(valid){
            let{ data } = await this.$axios({
              method: 'post',
              url: '/msg/publish',
              data: {
                msg,
                section:this.section,
                visitor,
                email,
                siteAdress
              }
            })

            if(data.code){
              return this.$message.error(data.msg)
            }
            // 留言成功
            this.publishSuccess(data.msg)
          }else{
            return false
          }
        })        
      }
    },
    // 获取留言
    async getMsg(isLoadMsg){
      this.isReqMsg = true
      let {data} = await this.$axios({
        method: 'post',
        url: '/msg/get',
        data: {
          pageSize: this.pageSize,
          curPage: this.curPage,
          section:this.section
        }
      })

      // 每条留言数据手动添加属性，用来存储数据，供回复功能使用
      data.data.list.map(item => {
        item.isShowReply = false
        item.replyMsg = ''
        item.replyUser = {}
        item.users_doc = item.users_doc[0]

        // 子留言添加同样属性（这里不能再使用replyUser字段了，服务端数据中有同样的字段，以免被覆盖掉）
        item.children.map(child => {
          child.isShowReply = false
          child.replyMsg = ''
          child.replyUser2 = {}

          child.users_doc = {}
          child.replyUsers_doc = {}
          for(let i = 0; i < item.children_users_doc.length; i++){
            if(child.user === item.children_users_doc[i]._id){
              child.users_doc = item.children_users_doc[i]
            }            
          }
          for(let i = 0; i < item.children_replyusers_doc.length; i++){
            if(child.replyUser === item.children_replyusers_doc[i]._id){
              child.replyUsers_doc = item.children_replyusers_doc[i]
            }
          }
        })
      })

      if(isLoadMsg){
        this.showList = this.showList.concat(data.data.list)
        setTimeout(() => {
          this.$zh_tran(localStorage.getItem('lang'))
          this.$setFont("#app", "SourceHanSerifCN-Medium")
        }, 200)
      }else{
        this.showList = data.data.list
      }      
      this.totalCount = data.data.totalCount
      this.isReqMsg = false

      if(this.showList.length === this.totalCount){
        this.loadMsgTip = '没有啦'
      }
      // console.log(this.showList.length, this.totalCount);
      if(this.totalCount === 0){
        this.loadMsgTip = '暂无留言'
      }

      if(this.totalCount > this.showList.length){
        this.loadMsgTip = '加载更多'
      }

      // console.log('list:', this.showList);
      // console.log('total:', this.totalCount);
    },
    loadMsgHandler(){
      if(this.isReqMsg || this.showList.length === this.totalCount) return
      // console.log("loadMsgHandler");
      this.curPage++
      this.getMsg(true)
    },
    // 留言发表成功
    publishSuccess(message){
      this.msg = ''
      this.curPage = 0
      // this.$message.success(message)
      this.getMsg(false)
    },
    // 获取头像
    getAvatar(item){
      let avatar = ''
      if(item.isVisitor){
        avatar = item.visitorAvatar
      }else{
        // avatar = item.user.avatar        
        if(item.users_doc){
          avatar = item.users_doc.avatar
        }               
      }
      return avatar
    },
    // 获取昵称
    getNick(item){
      let nick = ''
      if(item.isVisitor){
        nick = item.visitor
      }else{
        // nick = item.user.user
        if(item.users_doc){
          nick = item.users_doc.user
        }
      }
      return nick
    },
    // 获取用户类型(用户标识title用)
    getUserTitle(item){
      let title = ''
      if(item.isVisitor){
        title = '访客'
      }else{
        if(item.users_doc && item.users_doc.isAdmin){
          title = "管理员"
        }else{
          title = '注册用户'
        }
      }

      return title
    },
    // 显示管理员icon
    showAdminIcon(item){
      if(item.isVisitor){
        return false
      }else{
        if(item.users_doc){
          return item.users_doc.isAdmin
        }
        return false
      }
    },
    //获取访客email
    getVisitorEmail(item){
      if(item.isVisitor){
        return item.email
      }
      return ''
    },
    // 当前页
    curPageHandler(cpage){
      this.getShowList(cpage)
    },
    // 上一页
    prevPageHandler(cpage){
      this.getShowList(cpage)
    },
    // 下一页
    nextPageHandler(cpage){
      this.getShowList(cpage)
    },
    // 根据当前页请求留言数据
    getShowList(cpage){
      this.curPage = cpage - 1
      this.getMsg(false)
    },
    //处理时间格式
    formatDate(val) {
      let date = new Date(val),
        YY = date.getFullYear(),
        MM = date.getMonth() + 1,
        DD = date.getDate(),
        hh = date.getHours(),
        mm = date.getMinutes(),
        ss = date.getSeconds()

      hh < 10 && (hh = '0' + hh)
      mm < 10 && (mm = '0' + mm)
      ss < 10 && (ss = '0' + ss)

      return `${YY}年${MM}月${DD}日  ${hh}:${mm}`
    }
  },
  mounted() {
    // 点击页面关闭表情框
    document.addEventListener("click", () => {
      this.isShowExpression = false
      this.isShowMsgExpression = false
    })
  }
}
</script>

<style lang="less" scoped>
@pageWidth: 100vmin;

#MsgBoard{
  padding: 0 0.5rem;

  .msg-edit .userinfo-input .expression, .msg-show ul li .reply-input .expression, .msg-show ul li .msg-reply .reply-input .expression{
    position: absolute;
    display: block;
    max-width: 100%;
    width: 400px;
    height: 220px;
    top: 50px;
    padding: 10px 0;
    background-color: #fff;
    border: 1px solid rgb(210, 210, 210);
    border-radius: 5px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
    z-index: 1;
    ul{
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-content: space-between;
      max-width: 94%;
      height: 210px;
      padding: 10px;
      padding-bottom: 0px;
      overflow: hidden;
      overflow-y: scroll;
      li{
        background-color: #f7f7f7;
        border-radius: 5px;
        font-size: 24px;
        width: 50px;
        height: 50px;
        margin-right: 10px;
        margin-bottom: 10px;
        line-height: 50px;
        text-align: center;
        user-select: none;
        cursor: pointer;
      }
    }
  }
  
  .msg-show ul li .reply-input .expression, .msg-show ul li .msg-reply .reply-input .expression{
    max-width: 94%;
    top: 140px;
    ul{
      max-width: 90%;
    }
  }

  .msg-edit{
    text-align: left;
    margin: 3rem 5px 0 5px;
    /deep/ .el-textarea__inner{
      height: 100px;
    }
    h1{
      color: #ff4b41;
      font-size: 24px;
      margin-bottom: 16px;
    }
    .userinfo-input{
      position: relative;
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      width: inherit;
      .icon-biaoqing{
        font-size: 30px;
        line-height: 40px;
        cursor: pointer;
      }
    }

    .submit-btn{
      margin: 10px auto;
      width: 100%;
      border-radius: 5px;
      border: none;
      background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
      background-size: 1000% 1000%;
      animation: Gradient 60s linear infinite;
    }
    @keyframes Gradient{
      0%{
        background-position: 0% 50%;
      }
      50%{
        background-position: 100% 50%
      }
      100%{
        background-position: 0% 50%;
      }
    }
  }

  .msg-show{
    margin: 50px 5px 0 5px;
    ul{
      li{
        div.msg-main, div.reply-input, div.msg-reply .reply-user{
          display: flex;
        }        
        div.msg-reply, div.reply-input{
          // 主回复框
          margin-left: 50px;
          padding-left: 15px;
          padding-top: 15px;
          border-left: 4px solid #f0f0f0;
        }
        div.msg-reply .reply-input {
          // 子回复框
          padding-top: 10px;
        }
        div.reply-input{
          position: relative;
          border-left: none;
          flex-direction: column;
          /deep/ .el-textarea__inner{
            height: 80px;
          }
          /deep/ .el-button{
            min-width: 70px;
          }
          div{
            display: flex;
            justify-content: space-between;
            margin: 5px 0;
            .icon-biaoqing{
              font-size: 24px;
              cursor: pointer;
              margin-left: 5px;
            }
          }
        }
        
        div.msg-left{
          img{
            border-radius: 50%;
            width: 50px;
            height: 50px;
          }
        }
        div.msg-right{
          flex: 1;
          text-align: left;
          margin-left: 15px;
          div.user-info{
            padding-top: 5px;
            span.user-name{
              display: inline-block;
              font-size: 14px;
              font-weight: 600;
              color: #ff5400;
              width: 130px;
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
            }
            span.bloger{
              font-size: 10px;
              background-color: #a6a6a6;
              color: #fff;
              border-radius: 3px;
              padding: 2px 3px;
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
            }
            span.icon-jiaoyinzujifangke{
              font-size: 13px;
            }
            span.icon-zhucezhanghu{
              font-size: 18px;
            }
            span.msg-time{
              font-size: 12px;
              color: #999;
              margin-left: 20px;
            }
            span.top{
              font-size: 12px;
              padding: 3px 5px;
              border-radius: 3px;
              color: #ff5400;
              border: 1px solid #ff5400;
              margin-left: 20px;
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
            }
          }
          div.user-msg{
            font-size: 16px;
            padding-top: 9px;
            padding-bottom: 8px;
            white-space: pre-line;//保留换行符
            white-space: pre-wrap;//保留空格符
            span{
              color: #409eff;
              -webkit-touch-callout: none;
              -webkit-user-select: none;
              -khtml-user-select: none;
              -moz-user-select: none;
              -ms-user-select: none;
              user-select: none;
            }
          }
          div.msg-shield{
            font-size: 14px;
            font-style: italic;
            text-decoration: line-through;
            color: rgb(133, 133, 133);
          }
          div.msg-interactive{            
            i{
              display: inline-block;
              width: 50px;
              padding-right: 65px;
              cursor: pointer;
              font-size: 16px;
              color: #a3a3a5;
              cursor: pointer;
              &:nth-child(2){
                padding-right: 30px;
              }
              span{
                font-size: 12px;
                vertical-align: text-bottom;
                padding-left: 3px;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
              }

              &:hover{
                color: #ff890f;
                span{
                  color: #ff6037;
                }
              }
            }
            /deep/ .icon-shenglvehao{
              padding-right: 0;
              width: 20px;
            }
            i.islike{
              color: #ff6037;
            }
            .icon-huifu{
              font-size: 12px;
            }
          }
        }
      }
    }

    .msg-pager{
      margin-top: 50px;
    }
    .load_msg{
      margin: 3rem auto;
      background-color: #333;
      color: #fff;
      width: 100px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
  }

  :deep(.el-button+.el-button){
    margin-left: 0px;
  }

  /deep/ .el-form{
    display: flex;
    width: 100%;
  }

  /deep/ .el-form-item{
    margin-left: 5px;
    margin-bottom: 15px;
    width: 33.33%;
  }

  /deep/ .el-divider--horizontal{
    margin: 30px 0;
    z-index: -1;
  }

  /deep/ .el-pagination .btn-next, .el-pagination .btn-prev{
    background-color: transparent;
  }

  /deep/ .el-pagination button:disabled{
    background-color: transparent;
  }

  /deep/ .el-pager li{
    background-color: transparent;
  }

  /deep/ .el-pagination .btn-prev{
    background-color: transparent;
  }
}


/* 很小的设备（手机等，小于 599px） */
@media only screen and (max-width: 599px) { 
  #MsgBoard .msg-show ul li div.msg-right div.user-info span.top {
    margin: 5px 1px;
    display: inline-block;
  }
  #MsgBoard .msg-show ul li div.msg-right div.user-info span.msg-time{
    display: inline-block;
    margin-top: 5px;
    margin-left: 0;
  }
}

/* iphone6、7、8plus判断 小于600大于414 */
@media only screen and (max-width: 600px) and (min-width:414px){ 
  #MsgBoard .msg-show ul li div.msg-right div.user-info span.top {
    margin: 0 0 0 10px;
  }  
}

@media screen and (max-width:812px){
  #MsgBoard .el-form{
    flex-direction: column;
  }
  #MsgBoard .el-form-item{
    width: 95%;
  }
}

</style>